<template>
    <transition name="my-trans"> 
        <div style="width:89%;margin-left:2%;">
            <Row :gutter="16">
                <Col span="24" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
                    <Tabs type="card" :value="which_to_show_val">
                        <TabPane v-for="(item,index) in typeother=='one' ? tablistone :  tablist" :key="index" :label="item.name" :name="item.name">
                            <component :is="item.com" v-if="infoOld" :infoOld="infoOld" :typeother="typeother" @expandback="expandback"></component>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </div>      
    </transition>
</template>
<script>
export default {
    props: {
        infoOId: {
            type: [Boolean,Number,Object,Array],
            default: false
        },
        typeother: {
            type: [Boolean,String],
            default: false
        }
    },
    components: { 
        // 个人辅助信息
        Auxiliary: resolve => {require(['./Expand/Auxiliary.vue'], resolve);},
        // 入学信息
        Admission: resolve => {require(['./Expand/Admission/AdmissionInformation.vue'], resolve);},
        // 学籍基本信息
        Basic: resolve => {require(['./Expand/Basic.vue'], resolve);},
        // 个人联系信息
        Contact: resolve => {require(['./Expand/Contact.vue'], resolve);},
        // 个人扩展信息
        Expand: resolve => {require(['./Expand/Expand.vue'], resolve);},
        // 上下学交通信息
        Traffic: resolve => {require(['./Expand/Traffic.vue'], resolve);},
    },
    data() {
        return { 
            infoOld:null,  
            tablist:[
                {
                    name:'个人辅助信息',
                    com:'Auxiliary'
                },
                {
                    name:'学籍基本信息',
                    com:'Basic'
                },
                {
                    name:'个人联系信息',
                    com:'Contact'
                },
                {
                    name:'个人扩展信息',
                    com:'Expand'
                },
                {
                    name:'上下学交通信息',
                    com:'Traffic'
                },
                {
                    name:'入学信息',
                    com:'Admission'
                },
            ],
            tablistone:[
                {
                    name:'个人辅助信息',
                    com:'Auxiliary'
                },
                {
                    name:'个人联系信息',
                    com:'Contact'
                },
                {
                    name:'个人扩展信息',
                    com:'Expand'
                },
                {
                    name:'上下学交通信息',
                    com:'Traffic'
                },
                {
                    name:'入学信息',
                    com:'Admission'
                },
            ],
            which_to_show_val:this.typeother=='one' ? '个人辅助信息' :'学籍基本信息' 
        }
    },    
    methods: { 
        infoData(){
            this.$http.get(`api/student/v1/studentbase/lists/${this.infoOId}`).then(val=>{
                this.infoOld = JSON.parse(JSON.stringify(val.data))
            })
            .catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        expandback(data){
            if(data==true){
                this.infoData()
            }
        },

           
    },
    created() {
        // this.infoData()
    },
}
</script>
<style lang="less">
 .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
  min-height: 120px;
  margin-top: -16px;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  border-color: transparent;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  border-color: #fff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
  border-radius: 0;
  background: #fff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
  border-top: 1px solid #3399ff;
}
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #3399ff;
  position: absolute;
  top: 0;
  left: 0;
}
</style>